<template>
  <div class="plan-detail">
    <PageTemplate>
      <div slot="content">
         <el-form
          :model="phase"
          label-position="right"
          label-width="150px"
          class="page-edit-colllapse-form"
          ref="phase">
          <el-row>
            <el-col :span="12">
              <el-form-item label="实验室" prop="laboratoryName">
                  <span>{{laboratory.laboratoryName}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="年度" prop="year">
                  <span>{{laboratory.year}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="负责人" prop="leaderUserName">
                <span>{{phase.leaderUserName}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="参与人员" prop="personsStr">
                <span>{{phase.personsStr}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="阶段" prop="phaseName">
                <span>{{phase.phaseName}}</span>
              </el-form-item>
            </el-col>
             <el-col :span="12">
              <el-form-item label="开始日期" prop="plannedStartTime">
                <span>{{phase.plannedStartTime}}</span>
              </el-form-item>
            </el-col>
             <el-col :span="12">
              <el-form-item label="结束日期" prop="plannedEndTime">
                <span>{{phase.plannedEndTime}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="当前进展" prop="progressRemark" required>
                <span>{{phase.progressRemark}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="当前问题" prop="progressQuestion" required>
                <span>{{phase.progressQuestion}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="阶段成果" prop="fileName" required>
                <span>{{phase.fileName}}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-row class="row-empty-10"></el-row>
        <el-row>
          <el-button type="primary" @click="back">
            {{$t('cm.return')}}
          </el-button>
        </el-row>
      </div>
    </PageTemplate>
  </div>
</template>

<script>
import { ALERT } from '@/utils/responseHandle'
import * as Constant from '@/utils/constant'
import PageTemplate from '@/components/common/PageTemplate'
import HasBtn from '@/mixins/HasBtn'
import { mapState } from 'vuex'
import {COMMON} from '@/utils/commonUtil'
import api_sri from '@/api/api_sri'
export default {
  components: {
    PageTemplate, 
  },
  data () {
    return {
      laboratory: {},
      phase:{}
    }
  },
  watch: {
    "phase.persons"(val){
      if(val.length ==0 ) return;
      this.$set(this.phase,'personsStr',COMMON.arrToStr(val,"peopleName"))
    }
      
  },
  computed: {
    
  },
  created () {
      this.getData();
  },
  methods: {
    getData(){
      const id = this.$router.history.current.params.id;
      api_sri.sriGainLaboratoryAnnualStageInfo({
          id
        }, result => {
          if (result.code === Constant.RT_SUCCESS) {
               this.laboratory = result.data.laboratory
               this.phase = result.data.phase
          } else {
            ALERT.error(result.msg)
          }
          
        })
    },
    //返回
    back(){
      this.$router.go(-1);//返回上一层
    },
  },
}
</script>

<style lang="scss">
.plan-detail{
  .el-form{
    background: #fff;
    padding-top: 30px;
  }
}
</style>
